<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 移动端必须写的一个标签
      width：控制 viewport 的大小，可以指定的一个值，比如说600，或者特殊的值，如 device-width 为设备的宽度。

    initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

    maximum-scale：允许用户缩放到的最大比例。

    minimum-scale：允许用户缩放到的最小比例。

    user-scalable：用户是否可以手动缩放。
    iphoneX底部会出现一道白条。解决的方案是：meta标签添加viewport-fit=cover 属性，使页面占满整个屏幕
   -->
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>Document</title>
  <style>
        *{
          margin: 0; 
          padding: 0;
        }
        /* 由于html的font-size 被适配了 */
        body{
          font-size: 16px;
        }
        #hello{
          /* rem是随着 html的根元素的font-size改变 */
            /* 在设计图 量出 宽331px  高303px
            适配的是 1rem=100px 在设计图
             */
             width:1.6rem;
             height: 1.6rem;
             background: darkcyan;

        }
        #box{
          width: 1.9rem;
          /* 0.58rem 写成.58rem */
          height: .58rem; 
          background: darkblue;
          font-size: 20px;
          color: wheat;
        }
        /* 1rem=20px */
  </style>
</head>
<body>
      <div id="hello">

      </div>
      <div id="box">
        你好
      </div>
    <script>
        
        //1. 移动端布局   
        // 自适应布局 ： 每个屏幕尺寸的设备 都能良好的显示程序
        // 主流的移动端布局 flex+rem布局

      // 主流的设计图
        //  750的设计图--->iphone6,7,8 (真实设备375)  
        
      //rem是一个响应式单位  他随着html根元素的font-size改变 ,默认浏览器的16px
      // rem适配原理  让html根元素的font-size 随着设备的尺寸动态改变

      // 获取屏幕尺寸
      // 适配规则
          // 根据750的设计图   1rem=100px  
          // 1rem在真实设备 就是50px



        // document.documentElement  获取到html根元素
        document.documentElement.style.fontSize=window.innerWidth/7.5+"px"
   
        // // 屏幕尺寸大小改变事件
        window.onresize=function(){
            document.documentElement.style.fontSize=window.innerWidth/7.5+"px"
            if(window.innerWidth>750){
              // 如果设备尺寸 大于了750 
              // 最多设置100px
              document.documentElement.style.fontSize="100px";
            }
        }
    </script>
</body>
</html>